<template>
    <!--  封装的svg组件-->
    <img class="img-icon" :style="style" :src="source" alt="" />
</template>

<script>
import SVG from "../assets/svgs";

export default {
    name: "ImgIcon",

    props: {
        size: {
            type: String,
            default: "16px",
        },
        name: {
            type: String,
            default: "",
        },
        mr5: {
            type: Boolean,
            default: false,
        },
        color: {
            type: String,
            default: "#fff",
        },
    },

    computed: {
        source() {
            return SVG[this.name] || this.name;
        },
        style() {
            return {
                height: this.size,
                width: this.size,
                marginRight: this.mr5 ? "5px" : undefined,
                color: this.color,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/img-icon.scss";
</style>
